<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<%@include file="/WEB-INF/include-head.jsp" %>

<link rel="stylesheet" href="ztree/zTreeStyle.css"/>
<script type="application/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="application/javascript" src="crowd/my-menu.js"></script>

<%--引入boottrap模型，用作新增分支的弹窗--%>
<%@include file="/WEB-INF/model-menu-add.jsp" %>
<%--引入boottrap模型，用作更新分支的弹窗--%>
<%@include file="/WEB-INF/model-menu-edit.jsp" %>
<%--引入boottrap模型，用作删除分支的弹窗--%>
<%@include file="/WEB-INF/model-menu-delete.jsp" %>

<script type="application/javascript">

    $(function () {
        // 调用专门封装好的函数初始化树形结构
        generateTree();

        // 给添加子节点按钮绑定单击响应函数
        $("#treeDemo").on("click", ".addBtn", function () {
            // 将当前节点的 id，作为新节点的 pid 保存到全局变量
            window.pid = this.id;

            // 打开模态框
            $("#menuAddModal").modal("show");
            return false;
        });

        // 给编辑按钮绑定单击响应函数
        $("#treeDemo").on("click", ".editBtn", function () {
            // 将当前节点的 id 保存到全局变量
            window.id = this.id;

            // 打开模态框
            $("#menuEditModal").modal("show");

            // 获取 zTreeObj 对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            // 根据 id 属性查询节点对象    用来搜索节点的属性名
            var key = "id";

            // 用来搜索节点的属性值
            var value = window.id;
            var currentNode = zTreeObj.getNodeByParam(key, value);

            // 回显表单数据
            $("#menuEditModal [name=name]").val(currentNode.name);
            $("#menuEditModal [name=url]").val(currentNode.url);

            // 回显 radio 可以这样理解：被选中的 radio 的 value 属性可以组成一个数组，
            // 然后再用这个数组设置回 radio，就能够把对应的值选中
            $("#menuEditModal [name=icon]").val([currentNode.icon]);
            return false;
        });

        // 给“×”按钮绑定单击响应函数
        $("#treeDemo").on("click",".removeBtn",function(){
            // 将当前节点的 id 保存到全局变量
            window.id = this.id;
            // 打开模态框
            $("#menuConfirmModal").modal("show");
            // 获取 zTreeObj 对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            // 根据 id 属性查询节点对象    用来搜索节点的属性名
            var key = "id";
            // 用来搜索节点的属性值
            var value = window.id;
            var currentNode = zTreeObj.getNodeByParam(key, value);

            $("#menuConfirmModal [name=menuMessage]").val("是否确认删除？");

            $("#removeNodeSpan").html(" 【 <i  class='"+currentNode.icon+"'></i>"+currentNode.name+"】");
            return false;
        });

    });


</script>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <%@include file="/WEB-INF/include-nav.jsp" %>

</nav>
<div class="container-fluid">

    <%@include file="/WEB-INF/include-sidebar.jsp" %>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

        <div class="panel panel-default">
            <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                        class="glyphicon glyphicon-question-sign"></i></div>
            </div>
            <div class="panel-body">
                <ul id="treeDemo" class="ztree">
                    <li id="treeDemo_1" class="level0" tabindex="0" hidefocus="true" treenode=""><span
                            id="treeDemo_1_switch" title="" class="button level0 switch root_open"
                            treenode_switch=""></span><a id="treeDemo_1_a" class="level0" treenode_a="" onclick=""
                                                         target="_blank" style="" title="系统权限菜单"><span
                            id="treeDemo_1_ico" title="" treenode_ico="" class="fa fa-fw fa-sitemap"
                            style="background: 0 0 no-repeat;"></span><span id="treeDemo_1_span">系统权限菜单</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>